<template>
  <!-- 有遮罩层，实现遮罩层，背景地图可以移动 -->
  <div class="bg">
  </div>
  <div id="container" class="map"></div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted } from 'vue'
import { ref } from 'vue'
const map = ref(null);

const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "b3977fda4d111a20adbaad8399b82703",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar', 'AMap.Driving'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  let marker,
    map = new AMap.Map("container", {
      resizeEnable: true,
      center: [120.439915, 36.160679],
      zoom: 18
    });
  marker = new AMap.Marker({
    icon:
      "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    position: [120.439915, 36.160679],
    //设置偏移量
    offset: new AMap.Pixel(-10, -10),
  });
  marker.setMap(map);
}

onMounted(() => {
  initMap();
});

</script>

<style lang="less" scoped>
.bg {
  // css背景穿透
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 90vh;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.map {
  width: 100%;
  height: 90vh;
}
</style>
